<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性处理与刚性尺寸</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
</head>

<body>
    <div>
        <p>
            在进行弹性处理之余，其实有些场景我们更希望元素尺寸固定，不需要进行弹性调整。设置元素尺寸除了width/height以外，flex还提供了一个flex-basis属性。<br>
            flex-basis设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸<br>
            <strong>flex-basis == 主轴上的尺寸 != width</strong>
        </p>
        <p></p>
        <p></p>
    </div>
    <div>
        <p>flex-basis与width/height对比及区别<br>
            两者都是0：<br>
            <ol>
                <li>width:0 —— 完全没显示</li>
                <li>flex-basis:0 —— 根据内容撑开宽度</li>
            </ol>
        </p>
        <div id="container">
            <div>1111</div>
            <div>2222</div>
        </div>
    </div>
    <div>
        <p>flex-basis与width/height对比及区别<br>
            两者非0：<br>
            <ul>
                <li>width: 非0;</li>
                <li>flex-basis: 非0</li>
                <ol>
                    <li>数值相同时两者等效</li>
                    <li>同时设置，flex-basis优先级高</li>
                </ol>
            </ul>
        </p>
        <div id="container1">
            <div>1111</div>
            <div>2222</div>
        </div>
    </div>
    <div>
        <p>flex-basis与width/height对比及区别<br>
            flex-basis：auto<br>
            <ul>
                <li>flex-basis为auto时，如设置了width则元素尺寸由width决定；没有设置则由内容决定</li>
            </ul>
        </p>
        <div id="container2">
            <div>1111</div>
            <div>2222</div>
        </div>
    </div>
</body>
<style>
    #container {
        display: flex;
        background-color: aqua;
        width: 200px;
        height: 200px;
    }

    #container>div:first-child {
        width: 0;
    }

    #container>div:last-child {
        flex-basis: 0;
    }

    #container1 {
        display: flex;
        background-color: aqua;
        width: 200px;
        height: 200px;
    }

    #container1 div:first-child {
        width: 50px;
        height: 50px;
        border: 0.3px solid #000;
        background-color: chocolate;
    }

    #container1 div:last-child {
        width: 50px;
        height: 50px;
        flex-basis: 60px;
        border: 0.3px solid #000;
        background-color: chocolate;
    }

    #container2 {
        display: flex;
        background-color: aqua;
        width: 200px;
        height: 200px;
    }

    #container2 div:first-child {
        height: 50px;
        flex-basis: auto;
        border: 0.3px solid #000;
        background-color: chocolate;
    }

    #container2 div:last-child {
        width: 50px;
        height: 50px;
        flex-basis: auto;
        border: 0.3px solid #000;
        background-color: chocolate;
    }
</style>

</html>